<template>
  <div class="form-item col-1">
    <div class="wrapper">
      <!-- <draggable
          tag="div" class="tab-box"
          :list="tab_list"
          v-bind="dragOptions"> -->
				<div class="tab-box">
					<div class="tab-item" :class="[tab_active == item.id?'active':'']" v-for="item in tab_list" :key="item.id"
							@click="chooseIt(item)">
						<span>{{item.component}}</span>
						<!-- <span class="close">
							<a-icon class="icon-close11" type="close-circle" @click.stop="deleteIt(item.id)"/>
						</span> -->
					</div>
				</div>

      <!-- </draggable> -->

      <div style="margin-top: 10px" v-if="current_tab.id">
        <div class="title-box">
          <span style="flex: 0 0 100px">选项模块</span><span style="flex: 1;">{{current_tab.component}}</span>
        </div>
        <div class="title-box">
          <span style="flex: 0 0 100px;align-self: center">选项名称</span>
          <span style="flex: 1;"><a-input placeholder="选项名称" style="width: 200px" v-model.trim="current_tab.name"/></span>
        </div>
				<!-- 数据配置界面 -->
        <!-- <div style="margin-top: 15px">
          <template-config-detail
              :layout="current_tab.layout"
              :configs="current_tab.datas"
              :rootConfig="current_tab.datas"
              type="datas"
              key="datas">
          </template-config-detail>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
	import draggable from 'vuedraggable';
	// 配置项编译器
	// import templateConfigDetail from '../template-config-detail.vue';

	export default {
		components: {
			draggable,
			// templateConfigDetail
		},

		props: ['value', 'config', 'rootConfig'],

		data() {
			return {
				current_ids: [], //现在已经添加过的id
				tab_active: '', //当前选择的选项卡
				// tab_list: [],  //选项卡列表
				choose_type: '',
				current_tab: {},
				radioStyle: {
					display: 'block',
					height: '30px',
					lineHeight: '30px',
				},
				dragOptions: {
					animation: 200, // 动画时间
					group: "description",
					disabled: false,
					ghostClass: "sortable-ghost",
					dragClass: "sortable-drag",
					filter: ".ignore-elements"
				},
			}
		},

		computed: {
			tab_list: {
				get() {
					this.current_ids = [];
					if(this.value.length > 0) {
						this.value.map((item)=>{
							this.current_ids.push(item.id);
							item.remote_data = this.handle_data(item.datas)
							if(item.active) {
								this.current_tab = item;
								this.tab_active = item.id;
							}
						});
					}else {
						this.current_tab = {};
						this.tab_active = '';
					}

					return this.value;
				},
				set(newValue) {
					this.$emit('input', newValue);
				}
			},
			component_list() {
				return this.$store.state.design.component_list.componentList || []
      }
		},
		methods: {
			/**
			 * 处理数据
			 * @param {String} datas
			 * **/
			handle_data(datas) {
				let handleDatas = {};
				if(datas) {
					Object.keys(datas).map(key => {
						handleDatas[key] = datas[key].value;
					});
        }
				return handleDatas;
			},
			chooseIt(item) {
				for (let i = 0; i < this.tab_list.length; i++) {
					if(this.tab_list[i].id == item.id) {
						this.tab_list[i].active = true;
          }else {
						this.tab_list[i].active = false;
          }
				}
				this.current_tab = item;
				this.tab_active = item.id;
			},
			deleteIt(id) {
				for (let i = 0; i < this.tab_list.length; i++) {
					if (this.tab_list[i].id == id) {
						this.tab_list.splice(i, 1);
					}
					if (this.current_tab.id == id) {
						this.current_tab = {};
						if (this.tab_list.length >= 1) {
							this.tab_list[0].active = true;
							this.current_tab = this.tab_list[0];
							this.tab_active = this.tab_list[0].id;
						}
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
  .tab-box {
    // margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .tab-item {
    cursor: move;
    border: 1px solid #333333;
    color: #333333;
    padding: 5px 10px;
    margin: 5px;
    .close {
      cursor: pointer;
      padding: 2px 5px;
      margin-left: 5px;
    }
    &.active {
      border: 0;
      background-color: rgba(41, 186, 156, 0.15);
      color: #29ba9c;
    }
  }

  .title-box {
    display: flex;
    margin-bottom: 10px;
  }
</style>
